<template>
  <div class="model-form">
    <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="800" align-center>
      <el-form ref="dialogFormRef" :rules="dialogRules" :model="form" inline>
        <el-form-item label="节点类型" :label-width="formLabelWidth" prop="name4">
          <el-select v-model="form.name4" placeholder="请选择节点类型">
            <el-option label="Zone No.1" value="shanghai" />
            <el-option label="Zone No.2" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="节点状态" label-width="180px" prop="name3">
          <el-radio-group v-model="form.name3">
            <el-radio label="1">禁用</el-radio>
            <el-radio label="2">启用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div style="height: 250px">
        <el-auto-resizer>
          <template #default="{ height, width }">
            <el-table-v2 :columns="columns" :data="data" :width="width" :height="height" />
          </template>
        </el-auto-resizer>
      </div>
      <el-divider />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm(dialogFormVisible)">确定</el-button>
          <el-button @click="Cancel(dialogFormVisible)">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="tsx" setup>
const dialogFormVisible = ref(false)
const dialogTitle = ref<string>('')
const formLabelWidth = '80px'
const form = reactive({
  name4: '',
  name3: ''
})
const dialogRules = reactive<FormRules<RuleForm>>({
  name4: [{ required: true, message: '请选择节点类型', trigger: 'change' }],
  name: [{ required: true, message: '请输入节点名称', trigger: 'blur' }],
  name1: [{ required: true, message: '请输入节点名称', trigger: 'blur' }],
  name2: [{ required: true, message: '请输入节点名称', trigger: 'blur' }],
  name3: [{ required: true, message: '请输入节点名称', trigger: 'blur' }]
})
const open = async (type: string, id?: number) => {
  console.log('open')
  console.log(dialogFormVisible.value)
  dialogFormVisible.value = true
}

defineExpose({ open })

// 弹窗确定
const submitForm = async (formEl: FormInstance | undefined) => {
  console.log(formEl)
  const params = { ...formData }
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(operationType)
      if (operationType.value == 'add') {
        FormApi.insertHybaseGraph(params).then((res) => {
          console.log(res)
          dialogFormVisible.value = false
          formEl.resetFields()
          ElMessage({
            message: '添加成功',
            grouping: true,
            showClose: true,
            type: 'success'
          })
          resetFormFcn(formData)
          getTableData()
        })
      } else if (operationType.value == 'edit') {
        FormApi.updateHybaseGraph(params).then((res) => {
          console.log(res)
          dialogFormVisible.value = false
          formEl.resetFields()
          ElMessage({
            message: '编辑成功',
            grouping: true,
            showClose: true,
            type: 'success'
          })
          resetFormFcn(formData)
          getTableData()
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 弹窗取消
const Cancel = (formEl: FormInstance | undefined) => {
  dialogFormVisible.value = false
}
const columns: Column<object>[] = [
  {
    key: '节点数据项名称',
    title: '节点数据项名称',
    dataKey: '节点数据项名称',
    width: 150,
    align: 'center',
    cellRenderer: ({ cellData: id }) => <div>{id}</div>
  },
  {
    key: '输入类型',
    title: '输入类型',
    dataKey: '输入类型',
    width: 150,
    align: 'center',
    cellRenderer: ({ cellData: id }) => <div>{id}</div>
  },
  {
    key: '是否必填',
    title: '是否必填',
    dataKey: '是否必填',
    width: 150,
    align: 'center',
    cellRenderer: ({ cellData: id }) => <div>{id}</div>
  },
  {
    key: '值长度范围',
    title: '值长度范围',
    dataKey: '值长度范围',
    width: 150,
    align: 'center',
    cellRenderer: ({ cellData: id }) => <div>{id}</div>
  },
  {
    key: '操作',
    title: '操作',
    cellRenderer: (data) => (
      <>
        {/* <el-button onClick={deleteFcn.bind(this, data)} type="danger" text> */}
        <el-button type="danger" text>
          删除
        </el-button>
      </>
    ),
    width: 150,
    align: 'center'
  }
]
const generateData = (columns: ReturnType<typeof generateColumns>, length = 200, prefix = 'row-') =>
  Array.from({ length }).map((_, rowIndex) => {
    return columns.reduce(
      (rowData, column, columnIndex) => {
        rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
        return rowData
      },
      {
        id: `${prefix}${rowIndex}`,
        parentId: null
      }
    )
  })
const data = generateData(columns, 3)
</script>
<style lang="scss" scoped>
.model-form {
}
</style>
